<script setup lang="ts">
import FormFlow from "@/components/water/form/FormFlow.vue";
import FormPressure from "@/components/water/form/FormPressure.vue";

import { h, onMounted, ref, watch } from "vue";
import { CloudDownloadOutlined, SearchOutlined } from "@ant-design/icons-vue";

import { $endApi } from "@/api/base/index";

//流量设备界面
const FlowChecked = ref(true);
//切换按钮
const isFlowRadio = (id) => {
  if (id == 1) {
    FlowChecked.value = true;
  } else if (id == 2) {
    FlowChecked.value = false;
  }
};

//定义数据
const flowData = ref<IStandardPageModel<IFlowDevListModel>>();

const presuewData = ref<IStandardPageModel<IPressureModel>>();

import { message } from "ant-design-vue";
import {
  IFlowDevListModel,
  IFlowDevListModelQuery,
  IPressureModel,
  IStandardPageModel,
} from "@/api/base/index.type";

const page = ref(1);
const pageSize = ref(10);

//初始化数据
onMounted(() => {
  flowInitdata();
  presureInitdata();
});

async function flowInitdata() {
  let query: Partial<IFlowDevListModelQuery> = {
    page: page.value,
    pageSize: pageSize.value,
  };

  query = { ...query, ...cdtSearch.value };

  // 过滤掉为空的值
  Object.entries(query).forEach(([key, value]) => {
    if (!value) delete query[key];
  });

  const res = await $endApi.v1.water.flowDev.list(query);

  console.log("res111111111111111111", res);
  if (res.data && res.data.items) {
    res.data.items = res.data.items.map((item) => {
      const deviceInfo = JSON.parse(item.deviceinfo);

      return { ...item, deviceinfo: deviceInfo };
    });
  }

  console.log("res:3333333333", res);

  flowData.value = res.data;
}
//

async function presureInitdata() {
  let query: Partial<IFlowDevListModelQuery> = {
    page: page.value,
    pageSize: pageSize.value,
  };

  query = { ...query, ...cdtSearch.value };

  Object.entries(query).forEach(([key, value]) => {
    if (!value) {
      delete query[key];
    }
  });

  const res = await $endApi.v1.water.pressure.list(query);

  presuewData.value = await res.data;
}

// 子传父 监听页数变化
const onhandlePageSize = (data: PageSize) => {
  console.log("Data received from child:", data);
  page.value = data.current;
  console.log("======= page.value =======\n", page.value);
  pageSize.value = data.pageSize;
};
// 使用 watch 监听 page 和 pageSize 的变化 ,变化后执行 initdata 函数
watch([page, pageSize], async ([newpage, newPageSize]) => {
  page.value = newpage;
  console.log("======= page =======\n", page);
  pageSize.value = newPageSize;
  console.log("======= pageSize =======\n", pageSize);

  // 当 page 或 pageSize 发生变化时，调用 initdata 函数
  if (FlowChecked.value) {
    await flowInitdata();
  } else {
    await presureInitdata();
  }
});

//搜索

interface FlowSearch {
  deviceCode: string;
  deviceposition: string;
  status: string;
}

interface presureSerarch {
  deviceCode: string;
  deviceAddress: string;
  status: string;
}
const onSearch = async () => {
  Object.entries(cdtSearch.value).forEach(([key, value]) => {
    if (typeof value === "string") {
      cdtSearch.value[key] = value.trim();
    }
  });
  if (FlowChecked.value) {
    const newSearch: FlowSearch = {
      deviceCode: cdtSearch.value.deviceCode,
      deviceposition: cdtSearch.value.deviceAddress,
      status: cdtSearch.value.deviceStatus,
    };

    const query = { ...newSearch };

    for (let key in query) {
      if (query[key] == "") {
        delete query[key];
      }
    }
    console.log("======= data =======\n", query);
    const res = await $endApi.v1.water.flowDev.list(query);

    if (res) {
      console.log("======= res =======\n", res);
      if (res.data.meta.total == 0) {
        message.error("没有查找到");
      } else {
        flowData.value = res.data;
        message.success("搜索成功");
      }
    }
  } else {
    const newSearch: presureSerarch = {
      deviceCode: cdtSearch.value.deviceCode,
      deviceAddress: cdtSearch.value.deviceAddress,
      status: cdtSearch.value.deviceStatus,
    };

    const query = { ...newSearch };

    for (let key in query) {
      if (query[key] == "") {
        delete query[key];
      }
    }
    console.log("======= data =======\n", query);

    const res = await $endApi.v1.water.pressure.list(query);
    if (res) {
      console.log("======= res =======\n", res);
      if (res.data.meta.total == 0) {
        message.error("没有查找到");
      } else {
        presuewData.value = res.data;
        message.success("搜索成功");
      }
    }
  }
};

type KeyS = {
  deviceCode: string;
  deviceAddress: string;
  deviceStatus: string;
};

const cdtSearch = ref<KeyS>({
  deviceCode: "",
  deviceAddress: "",
  deviceStatus: "",
});
</script>

<template>
  <div class="myLayout">
    <!-- 设备变化 -->
    <div class="jump">
      <a-radio :checked="FlowChecked" @click="isFlowRadio(1)" class="radio">
        流量设备
      </a-radio>

      <a-radio :checked="!FlowChecked" @click="isFlowRadio(2)" class="radio">
        压力设备
      </a-radio>
    </div>
    <!-- 表格选择 -->

    <div class="navbtn">
      <a-form :model="cdtSearch" layout="inline" class="input-search">
        <a-form-item label="设备编号" name="username">
          <a-input v-model:value="cdtSearch.deviceCode"
        /></a-form-item>
        <a-form-item label="设备状态" name="deviceStatus">
          <a-input v-model:value="cdtSearch.deviceStatus"
        /></a-form-item>
        <a-form-item label="设备地址" name="username">
          <a-input v-model:value="cdtSearch.deviceAddress"
        /></a-form-item>
      </a-form>

      <a-button
        type="primary"
        :icon="h(SearchOutlined)"
        style="background-color: #1677ff;"
        @click="onSearch"
        class="button"
      >
        搜索
      </a-button>

      <a-button
        type="primary"
        style="background-color: #1677ff;"
        class="button"
      >
        导出
        <CloudDownloadOutlined />
      </a-button>
    </div>
  </div>
  <FormFlow
    :data="flowData"
    @handlePageSize="onhandlePageSize"
    v-if="FlowChecked"
  ></FormFlow>
  <FormPressure
    :data="presuewData"
    @handlePageSize="onhandlePageSize"
    v-else
  ></FormPressure>
</template>

<style lang="scss" scoped>
.myLayout {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;

  .jump {
    width: 400px;

    .ant-radio-wrapper {
      color: wheat;
    }

    :deep(.ant-radio-wrapper-checked.css-dev-only-do-not-override-19iuou) {
      font-weight: $font-weight-600;
      color: $text-primary;
    }

    .radio {
      padding-inline: 30px;
    }
  }

  .navbtn {
    padding-right: 40px;
    flex: 1;
    display: flex;
    justify-content: start;

    .input-search {
      color: red;
      overflow: hidden;

      :deep(.ant-form-item-label > label) {
        color: $text-primary;
      }
    }

    .button {
      margin-right: 20px;
    }
  }
}
</style>
